<template>
  <div class="form">
    <h1>Form</h1>

    <el-row :gutter="20">
      <el-col :span="12">
        <el-input v-model="user" clearable placeholder="yonghuming"></el-input>
        <el-input v-model="pass" placeholder="密码" show-password></el-input>
        <el-input suffix-icon="el-icon-phone" placeholder="带图标的"></el-input>
        <el-input size="mini" prefix-icon="el-icon-star-off" placeholder="带图标的"></el-input>
        <el-input placeholder="123">
          <template slot="prepend">Http://</template>
        </el-input>
        <el-button>立即注册</el-button>
      </el-col>
      <el-col :span="12">
        <el-input type="textarea" :rows="2" autosize placeholder="请输入内容" v-model="textarea"></el-input>

      <el-input type="textarea" :autosize="{ minRows: 2, maxRows: 4}" placeholder="请输入内容" v-model="textarea2"></el-input>

      </el-col>
    </el-row>

    <h2>indeterminate 状态</h2>
    <p>{{ cities }}</p>
    <p>{{ checkedCities }}</p>
    <p>{{ checkAll }}</p>
    <p>{{ isIndeterminate }}</p>

    <el-checkbox :indeterminate="isIndeterminate" v-model="checkAll" @change="handleCheckAllChange">全选</el-checkbox>
    <br><br>
    <el-checkbox-group v-model="checkdCities" @change="handleCheckedCitiesChange">
      <el-checkbox v-for="city in cities" :label="city" :key="city">{{ city }}</el-checkbox>
      </el-checkbox-group>

    <h2>Checkbox Group</h2>
     <p>{{ arr }}</p>  
      <el-checkbox-group v-model="arr">
        <el-checkbox label="复选框1"></el-checkbox>
        <el-checkbox label="复选框2"></el-checkbox>
        <el-checkbox label="复选框3"></el-checkbox>
        <el-checkbox label="复选框4" disabled></el-checkbox>
        <el-checkbox label="复选框5"></el-checkbox>
      </el-checkbox-group>
    <h2>Checkbox</h2>
    <p>{{ radio4 }}</p>
    <el-radio-group v-model="radio4" size="mini" @change="r4">
      <el-radio-button label="上海"></el-radio-button>
      <el-radio-button label="北京"></el-radio-button>
      <el-radio-button label="广州"></el-radio-button>
      <el-radio-button label="深圳"></el-radio-button>
      <el-radio-button label="张家口"></el-radio-button>
    </el-radio-group>
  </div>
</template>

<script>
const cityOptions = ['上海','北京','广州','深圳'];
export default {
    name: 'Form',
    data(){
      return {
        radio4: '上海',
         checked: true,
         arr :['复选框1，复选框4'],
         cities: cityOptions,
         checkedCities:['上海','北京'],
         checkAll: false,
         isIndeterminate: true,
         user:'',
         pass:'',
         textarea:'',
         textarea2:'',

      }
    },
    methods:{
      r4(e) {
        console.log("选中的是："+ e)
        console.log("最新结果："+ this.radio4);
      },
      handleCheckedCitiesChange(value) {
        let checkedCount = value.length;
        this.checkAll = checkedCount === this.cities.length;
        this.isIndeterminate = checkedCount > 0 && checkedCount < this.cities.length;
      },
      handleCheckAllChange(val){
        this.checkedCities = val ? cityOptions : [];
        this.isIndeterminate = false;
      }
    }
}
</script>

